<template>
  <div>
    <div id="myLogo" @click="this.$router.replace('/')">
          <img src="../assets/logo_my.png" 
          style="width:32%;height:100%;" @click="this.$route.push('/')">
      </div>
    <el-menu
        style="width: 100%; min-height: calc(100vh - 60px)"
        background-color="#545c64"
        :default-active="this.$route.path"
        router
        active-text-color="#ffd04b"
        text-color="#fff"
        class="el-menu-vertical-demo"
        unique-opened="true"
        >
      <!-- <el-menu-item>系统设置</el-menu-item> -->

      <template v-for="menu in menuList" :key="menu.name">
        <el-menu-item v-if="menu.path != null" :index="menu.path">{{menu.title}}</el-menu-item>
        
        <el-sub-menu v-else :index="menu.name">
          <template #title>{{menu.title}}</template>
          <el-menu-item 
            v-for="item in menu.children" 
            :key="item.name"
            :index="item.path">
            {{item.title}}
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script>
// import request from "../utils/request";

export default {
  data(){
    return{

    }
  },
  name: "Aside",
  computed:{
    // 获取导航栏内容
    menuList:{
      get(){
        // console.log("导航栏列表获取",this.$store.state.menus.menuList)
        return this.$store.state.menus.menuList
      }
    }
  }
}
</script>

<style scoped>

#myLogo{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;/*垂直居中*/
    align-items: center;
    background-color: #545c64;
}
</style>